import React, { useRef, useState, useEffect} from 'react'
import './StoreDetails.css'
import { Button, Space, Swiper, Toast } from 'antd-mobile'
import axios from 'axios'
import { useNavigate, useLocation } from 'react-router-dom'
export default function StoreDetails() {
    const navigate = useNavigate()
    const location = useLocation()
    const [thisdata, setThisdata] = useState(location.state.data)
    console.log(thisdata)
    const items = thisdata.imgs.map((color, index) => (
        <Swiper.Item key={index}>
            <div
                className='swp_content'
                style={{ backgroundImage: `url(${color})` }}
                onClick={() => {
                }}
            >
                
            </div>
        </Swiper.Item>
    ))
    const [shopcommodity, setShopcommodity] = useState([])
    const getshopcommodity = async () => {
        const res = await axios.get(`http://localhost:3000/getshopcommodity?_id=${thisdata.shopid._id}`).then((res) => {
            console.log(res.data.data);
            setShopcommodity(res.data.data)
        })
        
    }

    const gocustomer = ()=>{
        navigate('/customer',{state:{data:thisdata}})
    }
    useEffect(() => {
        getshopcommodity()
    },[])
    return (
        <div className='store'>
            <div className='store_top'>
                <div className='store_top_icon' onClick={() => {
                    navigate(-1)
                }
                }>
                </div>
                <Swiper indicatorProps={{
                    color: 'white',
                }}>{items}</Swiper>
            </div>
            <div className='store_content'>
                <div className='store_content_price'>
                    <div className='content_price_left'>
                        <span className='content_price'>￥{thisdata.nowPrice}</span>
                        <span className='content_price_old'><s>￥{thisdata.price}</s></span>
                    </div>
                    <div className='store_content_price_right'>
                        <span>已售{thisdata.sold}</span>
                    </div>
                </div>
                <div className='store_content_title'>
                    <p>{thisdata.name}</p>
                </div>
                <div className='store_content_fut'>
                    <div className='store_content_fut_left'>
                        {thisdata.shopid.serve.map((item, index) => {
                            return( <span key={index}>{item.setname}</span>)
                        })
                        }
                    </div>
                    <div>
                        <img src='https://cdn8.axureshop.com/demo2024/2322481/images/%E5%95%86%E5%93%81%E8%AF%A6%E6%83%85/u1475.svg'></img>
                    </div>
                </div>
            </div>
            <div className='store_pl'>
                <div className='store_pl_top'>
                    <h3>评论（{thisdata.pl.length>100?'100+':thisdata.pl.length}）</h3>
                    <div className='store_pl_top_text' onClick={()=>{navigate('/comment', {state:{data:thisdata}})}}>
                        <span className='store_pl_top_more'>查看全部</span>
                        <img src='https://cdn8.axureshop.com/demo2024/2322481/images/%E5%95%86%E5%93%81%E8%AF%A6%E6%83%85/u1475.svg'></img>
                    </div>
                </div>
                <div className='store_pl_content'>
                    {
                        thisdata.pl.slice(0,2).map((item, index) => {
                            return( <div className='store_pl_content_item' key={index}>
                                <div className='store_pl_content_top'>
                                <img src={item.plimg}></img>
                                <span key={index}>
                                    {item.plname}
                                </span>
                                </div>
                                <div className='store_pl_content_text'>
                                    {item.plcontent}
                                </div>
                            </div>)
                        })
                    }
                </div>
            </div>
            <div className='store_dp'>
                <div className='store_dp_title'>
                    <div className='store_dp_title_left'>
                        <img src={thisdata.shopid.shopimg}></img>
                        <div>
                            <h3>{thisdata.shopid.name}</h3>
                            <div><span>信用分 100</span><span>已售 {thisdata.shopid.sold}</span></div>
                        </div>
                    </div>
                    <div className='store_dp_title_right'>
                        <button onClick={()=>{
                            navigate('/shop',{
                                state:{
                                    shopid:thisdata.shopid
                                }
                            })
                        }}>进店逛逛</button>
                    </div>
                </div>
                <div className='store_dp_content'>
                    {
                        shopcommodity.filter(e=>e._id!=thisdata._id).slice(0,3).map((item, index) =>{
                            return(<div className='store_dp_content_item' key={index}>
                                <img src={item.img}></img>
                                <div>
                                    <p className='store_dp_content_item_title'>{item.name}</p>
                                    <p className='store_dp_content_item_price'>￥{item.nowPrice}</p>
                                </div>
                            </div>)
                        })
                    }
                </div>
            </div>
            <div className='store_desc'>
                <h3>商品详情</h3>
                <div className='store_desc_content'>
                    {thisdata.desc}
                </div>
            </div>
            <div className='store_chard'>
                <div className='store_chard_item' onClick={()=>{
                            navigate('/shop',{
                                state:{
                                    shopid:thisdata.shopid
                                }
                            })
                        }}>
                    <img src='https://cdn8.axureshop.com/demo2024/2322481/images/%E5%95%86%E5%93%81%E8%AF%A6%E6%83%85/u1460.svg'></img>
                    <p>店铺</p>
                </div>
                <div className='store_chard_item' onClick={()=>{
                    gocustomer()
                }}>
                    <img src='https://cdn8.axureshop.com/demo2024/2322481/images/%E5%95%86%E5%93%81%E8%AF%A6%E6%83%85/u1453.svg'></img>
                    <p>客服</p>
                </div>
                <div className='store_chard_item' onClick={()=>{
                    navigate('/ShoppingCart')
                }}>
                    <img src='../../../public/fair/storp_a.png'></img>
                    <p>购物车</p>
                </div>
                <button className='store_chard_buta'>
                    加入购物车
                </button>
                <button className='store_chard_butb'>
                    立即购买
                </button>
            </div>
        </div>
    )
}
